<template>
  <div class="category">
    <!-- 头部导航 -->
    <div>
      <van-nav-bar title="分类" left-arrow @click-right="clickShousuo">
        <template #right>
          <div class="shousuo">
            <img class="auto-img" src="../assets/sousuo.png" alt="" />
          </div>
        </template>
      </van-nav-bar>
    </div>

    <div class="fenlei-box">
      <div class="box-left">
        <van-sidebar v-model="activeKey" @change="clickData">
          <van-sidebar-item
            :title="item.title"
            v-for="(item, index) in navceData"
            :key="index"
          />
        </van-sidebar>
      </div>

      <div class="box-right">
        <div class="right-box">
          <div
            class="box-title-img"
            v-for="(item, indexs) in rightNavData"
            :key="indexs" @click="clickText($event)"
          >
            <div class="titlt-img">
              <img class="auto-img" :src="item.img" alt="" />
            </div>
            <div class="title-text" >{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import home from "../../public/json/home.json";
export default {
  name: "Category",
  data() {
    return {
      home,
      activeKey: 0,
      // 侧边导航
      navceData: [],

      // 右边数据
      rightNavData: [],
      index:0
    };
  },
  created() {
    this.getNavceData();
    this.clickData(this.index);
  },

  methods: {
    //点击相应页面获得text的文本
    clickText(event){
      let e = event.currentTarget;
      let text = e.innerText

      console.log("event.currentTarget==>",event.currentTarget);
      console.log("e==>",e.innerText);
      //加载提示
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
        icon:"http://inews.gtimg.com/newsapp_match/0/14718578029/0"
      })
      //跳转到搜索页面
      setTimeout(() => {
        this.$router.push({name:"ShouSuo",params:{currentText:text}})
      }, 1000);
    },

    getNavceData() {
      // this.navceData = home;
      console.log("this.navceData=>", this.home.bannerMask);
      this.navceData = this.home.bannerMask;
    },

    clickData(index) {
      this.navceData.forEach((item) => {
        if (index + 1 === item.id) {
          console.log("index=>", index + 1);

          this.rightNavData = item.item;
          return;
        }
      });

      console.log("item=>", this.rightNavData);
    },

    clickShousuo(){
      this.$router.push({name:"ShouSuo"})
    }
  },
};
</script>

<style lang="scss" scoped>
.fenlei-box {
  position: fixed;
  right: 0;
  top: 50px;
  bottom: 50px;
  left: 0;
  display: flex;
  background-color: #f5f5f5;
  .right-box {
    display: flex;
    flex-wrap: wrap;

    .box-title-img {
      text-align: center;
      width: 80px;
      padding: 5px;
    }
    display: flex;
    margin: 10px;
    width: calc(100% - 20px);
    background-color: white;
  }
  .box-left {
    width: 80px;
    height: 100%;
    overflow-y: hidden;
    background-color: white;
  }
  //   https://mall.360.cn/index/gethotlist

  // https://mall.360.cn/skin/grid?type=adset_sign&v=LATEST
  .box-right {
    width: calc(100% - 80px);
    height: 100%;
    overflow-y: hidden;
  }
}
.shousuo {
  width: 20px;
  height: 20px;
}
</style>

